<template>
	<div class="userBg">
		<div class="container">
			<div class="userInfo">
				<div class="name">{{userinfo.student}}老师，打卡</div>
			</div>
			<div class="imgBox">
				<div class="uploadIcon" @click="uploadImg()">
					<image v-if="imgInfo" :src="imgInfo"></image>
					<u-icon v-else name="photo" color="#ccc" size="60"></u-icon>
				</div>
				<div class="timeBox">
					{{ time }}
				</div>
			</div>
			<u-button type="primary" text="立即打卡" @click="daka()"></u-button>
			<u-gap height="10" bgColor="#fff"></u-gap>
			<u-button type="error" text="打卡纪录" @click="changePath()"></u-button>
			
			
		</div>
		
		<div class="loadBox" v-if="searchLoading">
			<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
		</div>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				tphone:"",
				userinfo:"",
				searchLoading:true,
				time:"",
				imgs:[],
				imgInfo:""
			}
		},
		onLoad(options) {
			this.tphone = options.phone
			this.getuserinfo()
		},
		onReady() {
			
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			},
		},
		created() {
			let that = this;
			setInterval(function(){
				that.time = that.getTime()
			},1000)
			
		},
		mounted() {
			let that = this 
			
		},
		watch: {
			
		},
		methods: {
			...mapActions(['LogSetPhone','LogSetOpenid']),
			getuserinfo() {
				let that = this
				db.collection('nbhd_tiku_students').where({
					phone: that.tphone
				}).get({
					success: res => {
						console.log(res)
						if(res.data.length > 0){
							that.userinfo = res.data[0]
						}
						that.searchLoading = false
					}
				})
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let sec = day.getSeconds().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu + ':' + sec
				return time
			},
			uploadImg(){
				let that = this
				
				wx.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
						var tempFilePaths = res.tempFilePaths
						that.imgs = tempFilePaths
						
						that.upLoadImage()
						
					},
					fail:function(req){
						console.log(req)
					}
				})
			},
			upLoadImage() {
				let that = this
				that.searchLoading = true
				wx.showLoading({
					title: '图片上传中',
				})
				wx.uploadFile({
					url: 'https://www.baixuemianshi.com/zhuanti/daka/xcx2.php', //仅为测试地址，填写你的url即可
					filePath: that.imgs[0],
					name: 'file',
					success: function(res) {
						let img = JSON.parse(res.data)
						that.imgInfo = 'https://www.baixuemianshi.com/zhuanti/daka/upload/' + img.data
						// that.addPath(JSON.parse(res.data))
						that.searchLoading = false
					},
					error: function(res) {
						console.log("上传失败!")
					},
				})
				wx.hideLoading();
			},
			daka(){
				let that = this
				if(!that.imgInfo){
					uni.showToast({
						title:"请上传图片",
						icon:"error"
					})
					return
				}
				that.searchLoading = true
				db.collection('24sk_daka_info').add({
					data:{
						phone: that.tphone,
						time:that.getTime(),
						name:that.userinfo.student,
						img:that.imgInfo
					},
					success: function(res){
						that.searchLoading = false
						uni.showToast({
							title:"打卡成功！",
							icon:"success"
						})
						
					}
				})
			},
			changePath(){
				let that = this
				uni.navigateTo({
					url:'./list?phone=' + that.tphone
				})
			}
		},
		components: {
			
		}
	};
</script>

<style scoped>
	@import url(./index.css);
</style>